<template>
    <div class="app">
        <!-- 顶部navBar -->
        <van-nav-bar right-text="取消" left-arrow @click-left="onClick" @click-right="onClick">
            <template #title>
                <van-search shape="round" v-model="value" placeholder="输入商品关键词或用户名" />
            </template>
        </van-nav-bar>
        <!-- 热门搜索 -->
        <div class="reMen">
            热门搜索
            <div id="lieBiao">
                <div v-for="(item, index) in reMenList" :key="index" @click="zhen">
                    <van-button class="zi" type="default" round>{{ item }}</van-button>
                </div>
            </div>
        </div>
        <!-- 搜索历史 -->
        <div class="liShi">
            <div class="ssls">搜索历史</div>
            <div class="">
                <van-cell-group v-for="(item, index) in liShiList" :key="index" @click="jia">
                    <van-cell>
                        <template #title>
                            <van-icon name="underway-o" />
                            {{ item }}
                        </template>
                        <van-icon name="cross" />
                    </van-cell>
                </van-cell-group>
            </div>
            <!-- 清空历史 -->
            <div v-if="liShiList.length" class="btnFu">
                <van-button type="default" class="btn" @click="qing">清空搜索历史</van-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: '',
    mixins: [],
    components: {},
    props: {},
    data() {
        return {
            value: '',
            reMenList: ['金银花', '灵芝', '鹿茸', '当归', '人参','人中黄'],
            liShiList: []
        }
    },
    computed: {},
    watch: {},
    created() {
        this.liShiList = ['金银花', '灵芝', '鹿茸', '保温', '面膜', '香薰', '洗衣']
    },
    mounted() { },
    methods: {
        onClick() {
            this.$router.push('/layout')
        },
        zhen() {
            this.$router.push('/suoSuoLieBiao')
        },
        jia() {
            this.$router.push('/souSuoKong')
        },
        qing() {
            this.liShiList = []
        }
    }
}
</script>

<style scoped lang="less">
.reMen {
    width: 100%;
    min-height: 18%;
    font-size: 12px;
    color: #999;
    padding: 16px;
    box-sizing: border-box;
}

#lieBiao {
    margin-top: 18px;
    display: flex;
    overflow: scroll;
    justify-content: space-between;
    // justify-content: space-around;
}
#lieBiao::-webkit-scrollbar{
    display:none;
}

.zi {
    font-size: 12px;
    width: 70px;
    height: 30px;
    margin-right:10px;
}

.liShi {
    width: 100%;
    min-height: 18%;
    font-size: 12px;
    color: #999;
}

.ssls {
    padding: 20px;
    box-sizing: border-box;
}

.btn {
    width: 100%;
}

.btnFu {
    margin-top: 40px;
}
</style>
